<template>
  <view class="userInfo">
    <view class="userInfo_imgBox">
      <image class="userInfo_img" src="/static/my/default-avator.png"></image>
      <!-- <image class="userInfo_img_icon" src="../../static/my/userInfo.png"></image> -->
    </view>
    <view class="userInfo_input">
      <view class="userInfo_txt">昵称</view>
	  <text>{{userInfoData.userName}}</text>
      <!-- <input v-model="userInfoData.userName" placeholder="请输入昵称" /> -->
    </view>
    <view class="userInfo_input">
      <view class="userInfo_txt">手机号</view>
      <input type="number" v-model="userInfoData.phone" placeholder="请输入手机号" />
    </view>
    <view class="userInfo_input">
      <view class="userInfo_txt">生日日期</view>
      <picker mode="date" :value="userInfoData.birthday" @change="pickerConfirm">
        <view class="uni-input">{{userInfoData.birthday || '请选择生日日期'}}  </view>
      </picker>
    </view>
    <view class="userInfo_btn" @tap="saveUserInfo">
      确认保存
    </view>
    <u-popup :show="cropperShow">
      <view class="cropperBox" v-if="cropperShow">
        <bt-cropper :containerSize="{width: cropperSet.width + 'px' ,height: cropperSet.height + 'px' }"
         ref="cropper" :imageSrc="cropperImgUrl"></bt-cropper>
      </view>
      <view class="cropBtn" @tap="crop">确认</view>
		</u-popup>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { uploadFile, getUserInfo } from '@/common/js/method.js'

const userInfoData = ref({
  avatar: null,
  phone: null,
  birthday: null,
});
const loginProvider = ref(null);
onLoad((opt)=>{
  userInfoData.value = uni.getStorageSync('userInfo');
  loginProvider.value = uni.getStorageSync('loginProvider');
})
// 修改生日日期
function pickerConfirm(e) {
  userInfoData.value.birthday = e.detail.value;
}

const cropper = ref(null);
function crop(){
  // 通过组件定义的ref调用cropper方法，返回一个promise对象
  cropper.value.crop().then((res)=>{
    
    uploadFile(res).then((e)=>{
      userInfoData.value.avatar = e;
      cropperShow.value = false;
    })
  })
}
const cropperShow = ref(false);
const cropperSet = ref({
  height: 0,
  width: 0,
})
const cropperImgUrl = ref(null);
// 修改头像
function editAvater() {
  uni.chooseImage({
    count: 1,
    success:(res)=>{
      if(res.errMsg == "chooseImage:ok") {
        uni.getImageInfo({
          src: res.tempFilePaths[0],
          success:(res)=>{
            if(loginProvider.value == 'alipay') {
              uploadFile(res.path).then((res)=>{
                userInfoData.value.avatar = res;
              })
              return
            }
            if(res.width == res.height) {
              uploadFile(res.path).then((res)=>{
                userInfoData.value.avatar = res;
              })
            }else {
              const { windowHeight, windowWidth } = uni.getWindowInfo();
              cropperSet.value.height = windowHeight;
              cropperSet.value.width = windowWidth;
              cropperImgUrl.value = res.path;
              cropperShow.value = true;
            }
          }
        })
      }
      
    }
  })
}
// 修改用户信息
function saveUserInfo() {
  uni.showLoading({
    title: '加载中'
  });
  uni.$request('/api/user/user/update/avatar', userInfoData.value).then((res)=>{
    if(res.status == 200) {
      getUserInfo();
      uni.showToast({
        title: '修改成功',
        icon: 'success',
        mask: true
      });
      setTimeout(()=>{
        uni.navigateBack();
      }, 1500)
    }
  })
}
</script>

<style lang="less" scoped>
.userInfo {
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding: 100rpx 32rpx 0;
}
.userInfo_imgBox {
  position: relative;
  margin: 0 auto 80rpx;
  width: 240rpx;
  height: 240rpx;
  .userInfo_img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
  }
}
.userInfo_img_icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72rpx;
  height: 72rpx;
}
.userInfo_input {
  margin: 0 auto 40rpx;
  width: 90%;
  box-sizing: border-box;
  opacity: 1;
  border-radius: 200rpx;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 56rpx 24rpx 56rpx;
  input {
    text-align: right;
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 40px;
    color: rgba(56, 56, 56, 1);
  }
  .uni-input {
    font-size: 28rpx;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 40px;
    color: rgba(56, 56, 56, 1);
  }
}
.userInfo_txt {
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 40rpx;
  color: rgba(166, 166, 166, 1);
}
.userInfo_btn {
  border-radius: 200rpx;
  background: rgba(69, 145, 230, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32rpx 0;
  font-size: 32rpx;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 1);
}
/deep/ .bt-container .mainContent .cropper {
  border-radius: 50%;
  border: 1px solid #3e3e3e;
}
.cropperBox {
  position: relative;
}
.cropBtn {
  z-index: 10;
  width: 80%;
  text-align: center;
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 200rpx;
  background: rgba(69, 145, 230, 1);
  padding: 32rpx 0;
  font-size: 32rpx;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 46rpx;
  color: rgba(255, 255, 255, 1);
}
</style>